import "./start.css"
import { useHistory } from "react-router-dom";
import { useRef, useEffect } from "react";

export default function Start() {
    let history = useHistory();
    let userRef = useRef();


    function handleStart() {
        if (userRef.current.value.trim()) {
            let username = userRef.current.value.trim();
            window.sessionStorage.setItem("username", JSON.stringify({ username }))
            history.push("/home");
        }
        else {
            alert("用户名为空")
        }
    }
    useEffect(() => {
        return (
            function () {

            }
        )
    })
    return (
        <div className="Box">
            <div className="loginBox">
                <div>
                    Input Your Name
                </div>
                <input ref={userRef} type="text" id="username">
                </input>

                <div className="box" onClick={handleStart}>
                    <div className="change"></div>
                    <div className="start">Start App</div>
                </div>

            </div>
        </div>
    )
}